<template>
  <div class="cookie-test">
    <button @click="cookieInTest">点击存入cookie</button>
    <button @click="cookieDeleteTest">点击删除cookie</button>
    <br>
    <span>mydata:{{ myData }}</span>
  </div>
</template>
<script setup lang="ts">
import {defineComponent, getCurrentInstance, ref, onMounted} from 'vue';
import VueCookies from 'vue-cookies'

let cookieForm = ref();
let internalInstance = getCurrentInstance();
let cookies = internalInstance.appContext.config.globalProperties.$cookies

const cookieInTest = () => {
  // 将数据保存到cookie中
  cookies.set('myData', '测试数据', '30d')
  myData.value = cookies.get('myData');
  console.log("set--mydata,", myData.value);
}

const cookieDeleteTest = () => {
  // 获取
  cookies.remove('myData');
  myData.value = cookies.get('myData');
}

const myData = ref('')

onMounted(() => {
  // 从cookie中读取数据
  myData.value = cookies.get('myData')
  console.log("mydata,", myData.value);
})
</script>